/**
 * @author Manuel
 */
LOWER_BOUND = 100;
UPPER_BOUND = 10000;
TIMEOUT = 1000;

function toggle_visibility(id) {
	var e = document.getElementById(id);
	e.style.visibility = 'visible';
	/*if (e.style.visibility == 'hidden')
		e.style.visibility = 'visible';
	else
		e.style.visibility = 'hidden';*/
}

//-->
function stage1() {
	var speechElement = document.getElementsByClassName('speech')[0];
	var speechText = "Purpose of use<br/>";
	speechText += "<table>" +
					  "<tr>" +
					  	"<td valign='bottom'>" +  //simple use icon
					  		"<a href=\"#\" " +
					  		   "style='text-decoration: none' " +
					  		   "onclick=\"show_got_it();" +
										 " tout=setTimeout(\'stage2(1)\',TIMEOUT);" +
										 " answersArray[0]=\'simple\';" +
										 " toggle_visibility('s1');\" " +
							   "class=\"tip\" title=\"day to day laptop activity. For example: document editing, video, surfing the web etc.\" " +
							   "data-placement=\"bottom\">" +
							   "<img src=\"img\/simpleLaptop.svg\"\/>" +
							"</a>" +
						"</td>" +
						"<td valign='bottom'>" +  //heavy use icon
					  		"<a href=\"#\" " +
					  			"style='text-decoration: none' " +
					  			"onclick=\"show_got_it();" +
					  					" answersArray[0]=\'pro\';" +
										" tout=setTimeout(\'stage2(3)\',TIMEOUT);" +
										" toggle_visibility('s1');\" " +
								"class=\"tip\" title=\"I am challenging my laptop. For example: a gamer, a designer, an engineer, etc.\" " +
								"data-placement=\"bottom\">" +
								"<img src=\"img\/extensiveLaptop.png\"\/>" +
							"</a>" +
						"</td>" +
					  "</tr>" +
					  "<tr>" +
					  	"<td valign='top'>" +  //simple use text
					  		"<a href=\"#\" " +
					  			"style='text-decoration: none' " +
					  			"onclick=\"show_got_it();" +
										 " tout=setTimeout(\'stage2(1)\',TIMEOUT);" +
										 " answersArray[0]=\'simple\';" +
										 " toggle_visibility('s1');\" " +
								"class=\"tip\" title=\"day to day laptop activity. For example: document editing, video, surfing the web etc.\">" +
								"<h4>daily use</h4>" +
							"</a>" +
						"</td>" +
						"<td valign='top'>" +  //heavy use text
					  		"<a href=\"#\" " +
					  			"style='text-decoration: none' " +
					  			"onclick=\"show_got_it();" +
										 " answersArray[0]=\'pro\';" +
										 " tout=setTimeout(\'stage2(3)\',TIMEOUT);" +
										 " toggle_visibility('s1');\" " +
								"class=\"tip\" title=\"I am challenging my laptop. For example: a gamer, a designer, an engineer, etc.\" " +
								"data-placement=\"bottom\">" +
								"<h4>heavy use</h4>" +
							"</a>" +
						"</td>" +
						"<td>" +
							"<h4 style='display:inline; visibility:collapse;'>e</h4>" +
						"</td>" +
					  "</tr>" +
				  "</table>";
	speechElement.innerHTML = speechText;
}

function stage2(choice) {
	var speechElement = document.getElementsByClassName('speech')[0];
	var speechText = "Measures<br/>";
	speechText += "<table id=\"options\">";
	//small measurements icon
	if (choice == 3) { // chose a heavy use laptop- block small
		speechText += "<tr>" +
						"<td id=\"option1\" valign='bottom'>" +
							"<img src=\"img\/small_measure_greyed.png\"" +
								" title=\"" +
								"Hey there, considering a device for heavy-use which requires bigger components, " +
								"I recommend you choose the medium or big size.\"/>" +
						"</td>";
	}
	else {
		speechText += "<tr>" +
						"<td id=\"option1\" valign='bottom'>" +
			 				"<a href=\"#\" " +
			 					"style='text-decoration: none' " +
			 					"onclick=\"show_got_it();" +
			 							" answersArray[1]=\'small\';" +
			 							" tout=setTimeout(\'stage3(2)\',TIMEOUT);" +
			 							" toggle_visibility('s2');\" " +
			 					"class=\"tip\" " +
			 					"title=\"ultrabooks and tablets: devices that weight up to 1.5 kg\" " +
			 					"data-placement=\"bottom\">" +
			 					"<img src=\"img\/small_measure.png\"\/>" +
			 				"</a>" +
			 			"</td>";
	}
	//medium measurements icon
	speechText += "<td id=\"option2\" valign='bottom'>" +
				  	"<a href=\"#\" " +
				  		"style='text-decoration: none' " +
				  		"onclick=\"show_got_it();" +
							 	" answersArray[1]=\'medium\';" +
							 	//if the stage1 choice was heavy use, medium measurements will block the big battery, else won't block anything 
								" tout= (answersArray[0]==\'simple\') ? setTimeout(\'stage3(0)\',TIMEOUT) : setTimeout(\'stage3(4)\',TIMEOUT);" +
								" toggle_visibility('s2');\" " +
						"class=\"tip\" " +
						"title=\"medium laptops: devices that weight between 1.5 - 2.5 kg\" " +
						"data-placement=\"bottom\">" +
						"<img src=\"img\/medium_measure.png\"\/>" +
					"</a>" +
				  "</td>";
	//big measurements icon
	if (choice == 1) { // chose a daily use laptop- block big
		speechText += "<td id=\"option1\" valign='bottom'>" +
							"<img src=\"img\/big_measure_greyed.png\"" +
								" title=\"" +
								"Hey there, you don\'t really need a big laptop for day-to-day use;" +
								"it will consume too much battery and you won\'t use its full potential.\"/>" +
		     		  "</td>";
	}
	else {
		speechText +=  	"<td id=\"option3\"valign='bottom'>" +
					  		"<a href=\"#\" " +
					  			"style='text-decoration: none' " +
					  			"onclick=\"show_got_it();" +
					  					 " answersArray[1]=\'large\';" +
					  					 " tout=setTimeout(\'stage3(56)\',TIMEOUT);" +
					  					 " toggle_visibility('s2');\" " +
					  			"class=\"tip\" " +
					  			"title=\"devices that weigh over 2.5 kg\" " +
					  			"data-placement=\"bottom\">" +
					  			"<img src=\"img\/big_measure.png\"\/>" +
					  		"</a>" +
					  	"</td>";
					  
	}
	//small measurements text
	if (choice == 3){ // chose a heavy use laptop- block small
		speechText += "<tr>" +
						"<td id=\"option1txt\" valign='top'>" +
			 				"<h4 title=\"" +
			 						"Hey there, considering a device for heavy-use which requires bigger components, " +
			 						"I recommend you choose the medium or big size.\" " +
			 					"style=\"color: grey\">" +
			 					"small" +
			 				"</h4>" +
			 			"</td>";
	} else {
		speechText += "<tr>" +
						"<td id=\"option1txt\" valign='top'>" +
							 "<a href=\"#\" " +
							 	"style='text-decoration: none' " +
							 	"onclick=\"show_got_it();" +
							 			" answersArray[1]=\'small\';" +
							 			" tout=setTimeout(\'stage3(2)\',TIMEOUT);" +
							 			" toggle_visibility('s2');\" " +
							 	"class=\"tip\" " +
							 	"title=\"ultrabooks and tablets: devices that weight up to 1.5 kg\" " +
							 	"data-placement=\"bottom\">" +
							 	"<h4>small</h4>" +
							 "</a>" +
						"</td>";
	}
	//medium measurements text
	speechText += "<td id=\"option2txt\" valign='top'>" +
				  	   "<a href=\"#\" " +
				  	   	  "style='text-decoration: none' " +
				  	   	  "onclick=\"show_got_it();" +
								" answersArray[1]=\'medium\';" +
								//if the stage1 choice was heavy use, medium measurements will block the big battery, else won't block anything 
								" tout= (answersArray[0]==\'simple\') ? setTimeout(\'stage3(0)\',TIMEOUT) : setTimeout(\'stage3(4)\',TIMEOUT);" +
								" toggle_visibility('s2');\" " +
						  "class=\"tip\" " +
						  "title=\"medium laptops: devices that weight between 1.5 - 2.5 kg\" " +
						  "data-placement=\"bottom\">" +
						  "<h4>medium</h4>" +
					   "</a>" +
				  "</td>";
	//big measurements text
	if (choice == 1){ //chose a daily use- block big
		speechText +=    "<td id=\"option3txt\" valign='top'>" +
						   "<h4 title=\"" +
						   			"Hey there, you don\'t really need a big laptop for day-to-day use;" +
						   			"it will consume too much battery and you won\'t use its full potential.\" " +
						   	   "style=\"color: grey\">" +
						   	   "big" +
						   "</h4>" +
						 "</td>";
	}
	else {
		speechText +=    "<td id=\"option3txt\" valign='top'>" +
							"<a href=\"#\" " +
							   "style='text-decoration: none' " +
							   "onclick=\"show_got_it();" +
										" answersArray[1]=\'large\';" +
										" tout=setTimeout(\'stage3(6)\',TIMEOUT);" +
										" toggle_visibility('s2');\" " +
							   "class=\"tip\" " +
							   "title=\"devices that weigh over 2.5 kg\" " +
							   "data-placement=\"bottom\">" +
							   "<h4>big</h4>" +
							"</a>" +
						  "</td>";
	}
	
	speechText += 	  "<td>" +
					  	"<h4 style='display:inline; visibility:collapse;'>e</h4>" +
					  "</td>" +
					 "</tr>" +
				  "</table>";
	speechElement.innerHTML = speechText;
}

function stage3(choice) {
	var speechElement = document.getElementsByClassName('speech')[0];
	var speechText = "Battery<br/>" + 
				"<table cellpadding='10'>" +
					"<tr>";
	//small sized battery
	if (choice == 2){ //chose a daily use with small measurements- block the small battery choice
		speechText +=   "<td valign='bottom'>" + 
							"<img src=\"img\/small_battery_greyed.jpg\" " +
								"title=\"Hey there, since you\'re looking for a day-to-day use laptop with small measurements, I highly recommend taking more battery autonomy.\"/>" +
						"</td>";
	}
	else {
		speechText +=   "<td valign='bottom'>" + 
							"<a href=\"#\" " +
									"style='text-decoration: none' " +
									"onclick=\"show_almost_there();" +
										 	" answersArray[2]=\'small\';" +
										 	" tout=setTimeout(\'stage4()\',TIMEOUT);" +
										 	" toggle_visibility('s3');\" " +
									"class=\"tip\" title=\"up to 2.5 hours autonomy\" data-placement=\"bottom\" " +
									"data-toggle=\"tooltip\">" +
									"<img src=\"img\/small_battery.jpg\"\/>" +
							"</a>" +
						"</td>";
	}
	//medium sized battery
	if (choice == 56){
		//block medium sized battery
		speechText += 		"<td>" + 
								"<img src=\"img\/small_battery2_greyed.jpg\" " +
								"title=\"A heavy-duty device with big measurements consumes the battery in a very high rate. " +
								"I recommend you choose 2 to 3 hours battery autonomy or change the size to medium.\"/>" +
							"</td>";
	}
	else {
		speechText += 		"<td>" + 
								"<a href=\"#\" " +
										"style='text-decoration: none' " +
										"onclick=\"show_almost_there();" +
												" answersArray[2]=\'medium\';" +
												" tout=setTimeout(\'stage4()\',TIMEOUT);" +
												" toggle_visibility('s3');\" " +
										"class=\"tip\" title=\"3-5 hours autonomy\" data-placement=\"bottom\" " +
										"data-toggle=\"tooltip\">" +
										"<img src=\"img\/small_battery2.jpg\"\/>" +
								"</a>" +
							"</td>";
	}
	//big battery
	if ((choice == 56)||(choice==4)){
		//block big sized battery
		speechText += 		"<td valign='top'>" +
								"<img src=\"img\/small_battery3_greyed.jpg\" " +
								"title=\"a heavy-duty device with big measurements consumes the battery in a very high rate. " +
								"I recommend you choose 2 to 3 hours battery autonomy or take a day-to-day use laptop.\"/>" +
							"</td>";
		
	}
	else {
		speechText += 		"<td valign='top'>" +
								"<a href=\"#\" " +
										"style='text-decoration: none' " +
										"onclick=\"show_almost_there();" +
											 	" answersArray[2]=\'big\';" +
											 	" tout=setTimeout(\'stage4()\',TIMEOUT);" +
											 	" toggle_visibility('s3');\" " +
										"class=\"tip\" title=\"5-8 hours autonomy\" data-placement=\"bottom\" " +
										"data-toggle=\"tooltip\">" +
										"<img src=\"img\/small_battery3.jpg\"\/>" +
								"</a>" +
							"</td>";
	}
	speechText +=	"</tr>" +
				"</table>";
	
	speechElement.innerHTML = speechText;
}

function stage4() {
	var speechElement = document.getElementsByClassName('speech')[0];
	var speechText = "Design<br/>"; 
	speechText += "<table>" +
				  "<tr><td valign='bottom'><a href=\"#\" style='text-decoration: none' onclick=\"show_bigQ();" +
						 " answersArray[3]=\'conservative\';" +
						 " tout=setTimeout(\'stage5()\',TIMEOUT*2);" +
						 " toggle_visibility('s4');\" " +
				  "class=\"tip\" title=\"I don\'t pay too much attention to the design.\" data-placement=\"bottom\">" +
				  "<img src=\"img\/simpleDesign.png\"\/></a></td>" +
				  "<td valign='bottom'><a href=\"#\" style='text-decoration: none' onclick=\"show_bigQ();" +
										 " answersArray[3]=\'innovative\';" +
										 " tout=setTimeout(\'stage5()\',TIMEOUT*2);" +
										 " toggle_visibility('s4');\" " +
			      "class=\"tip\" title=\"I like innovative stuff\" data-placement=\"bottom\">" +
				  "<img src=\"img\/specialDesign.png\"\/></a></td></tr>" +
				  "<tr><td valign='top'><a href=\"#\" style='text-decoration: none' onclick=\"show_bigQ();" +
						 " answersArray[3]=\'conservative\';" +
						 " tout=setTimeout(\'stage5()\',TIMEOUT*2);" +
						 " toggle_visibility('s4');\" " +
				  "class=\"tip\" title=\"I don\'t pay too much attention to the design.\" data-placement=\"bottom\">" +
				  "<h4>simple</h4></a></td>" +
				  "<td valign='top'><a href=\"#\" style='text-decoration: none' onclick=\"show_bigQ();" +
										 " answersArray[3]=\'innovative\';" +
										 " tout=setTimeout(\'stage5()\',TIMEOUT*2);" +
										 " toggle_visibility('s4');\" " +
			      "class=\"tip\" title=\"I like innovative stuff\" data-placement=\"bottom\">" +
				  "<h4>innovative</h4></a></td><td><h4 style='display:inline; visibility:collapse;'>e</a4></td></tr></table>";
	speechElement.innerHTML = speechText;
}

function stage5() {
	var speechElement = document.getElementsByClassName('speech')[0];
	var speechText = "Money</br>" +
					 "<h6 style='display:inline; position:absolute; left:20%;'>100$</h6>" +
					 "<h6 style='display:inline; position:absolute; left:26%;'>(</h6>" +
					 "<h6 id='from' style='color:blue; display:inline; position:absolute; left:27%;'>100</h6>" +
					 "<h6 style='display:inline; position:absolute; left:35%;'>)</h6>" +
					 "<div style='display:inline; position:absolute; left:22%;'>" +
					 "<div class='noUiSlider'></div></div>" +
					 "<h6 style='display:inline; position:absolute; left:61%;'>(</h6>" +
					 "<h6 id='to' style='color:blue; display:inline; position:absolute; left:62%;'>5000</h6>" +
					 "<h6 style='display:inline; position:absolute; left:70%;'>)</h6>" +
					 "<h6 style='display:inline; position:absolute; left:72%;'>5000$</h6>" +
					 "<div><button class=\"btn-large\" name=\"continue\" type=\"button\" style='position:absolute; right:38%; bottom: 38%;'" +
					 " onclick=" +
					 "\"low = $('#from').text();" +
				 	 " high = $('#to').text();" +
					 " if (high-low<0) { alert(\'incorrect limits, please choose again\');} else {" +
					 " answersArray[4]=low;" +
					 " answersArray[5]=high;" +
					 " toggle_visibility('s5');" +
					 " finish();" + 
					 " }\">Find me a laptop!</button></div>";
	speechElement.innerHTML = speechText;
	
	$(".noUiSlider").noUiSlider({
		range: [100, 5000]
		,start: [101, 4999]
		,handles: 2
		,connect: true
		,step: 1
		,serialization: {
			 to: [$('#from'), $('#to')]
			,resolution: 1
		}
		,slide: function(){
		var values = $(this).val();
		  $("#from").html(values[0]);
		  $("#to").html(values[1]);
		}
	}); 
}

function hide_to_stage(id,choice) {
	var temp;
	$(".results").hide();
	$("#content").show();
	
	switch (id)
	{
	case s1:
		temp = document.getElementById('s1');
		temp.style.visibility = 'hidden';
		temp = document.getElementById('s2');
		temp.style.visibility = 'hidden';
		temp = document.getElementById('s3');
		temp.style.visibility = 'hidden';
		temp = document.getElementById('s4');
		temp.style.visibility = 'hidden';
		temp = document.getElementById('s5');
		temp.style.visibility = 'hidden';
		clearTimeout(tout);
		stage1();
		break;
	case s2:
		temp = document.getElementById('s2');
		temp.style.visibility = 'hidden';
		temp = document.getElementById('s3');
		temp.style.visibility = 'hidden';
		temp = document.getElementById('s4');
		temp.style.visibility = 'hidden';
		temp = document.getElementById('s5');
		temp.style.visibility = 'hidden';
		clearTimeout(tout);
		if (choice[0] == 'simple'){
			//block big - route 1
			stage2(1);
		}
		else {
			stage2(3);
		}
		break;
	case s3:
		temp = document.getElementById('s3');
		temp.style.visibility = 'hidden';
		temp = document.getElementById('s4');
		temp.style.visibility = 'hidden';
		temp = document.getElementById('s5');
		temp.style.visibility = 'hidden';
		clearTimeout(tout);
		if ((choice[0]=='simple') && (choice[1]=='small')){
			stage3(2);
		}
		else if ((choice[0]=='pro') && (choice[1]=='medium')){
			stage3(4);
		}
		else if ((choice[0]=='pro') && (choice[1]=='large')){
			stage3(56);
		}
		else stage3(0);		
		break;
	case s4:
		temp = document.getElementById('s4');
		temp.style.visibility = 'hidden';
		temp = document.getElementById('s5');
		temp.style.visibility = 'hidden';
		clearTimeout(tout);
		stage4();
		break;
	case s5:
		temp = document.getElementById('s5');
		temp.style.visibility = 'hidden';
		clearTimeout(tout);
		stage5();
		break;
	}
	//stage.style.visibility = 'visible';	
}

function show_got_it() {
	var speechElement = document.getElementsByClassName('speech')[0];
	speechElement.innerHTML = "Got it!";
	
}

function show_almost_there() {
	var speechElement = document.getElementsByClassName('speech')[0];
	speechElement.innerHTML = "Almost there!";
	
}

function show_bigQ() {
	var speechElement = document.getElementsByClassName('speech')[0];
	speechElement.innerHTML = "Great! now, for The Big Question!</br></br><img src='img/ssl.jpg'></img>";
	
}

//setTimeout(show_got_it(),300);
